<template>
  <div class="container">
    <van-nav-bar fixed :border="false" class="navbar">
      <template #left>
        <van-icon name="arrow-left" size="22" color="#fff" @click="$router.go(-1)" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="header">
        <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
        <div class="operate">
          <span class="playall" @click="getAllID(songAllID)"><van-icon name="play-circle" />播放全部</span>
          <span><van-icon name="passed" size="16" /></span>
        </div>
      </div>

      <div class="ulbox">
        <ul class="ul">
          <!-- <router-link > -->
          <!-- "`/songdetaill/${item.id}/${item.name}/${setUrl(item.al.picUrl)}`" -->
          <li class="li" @click="getSongID(item.id, item.name, item.ar[0].name, item.al.picUrl, index)" v-for="(item, index) of songlist" :key="index">
            <img :src="item.al.picUrl" />
            <div class="msg">
              <span>{{ item.name }}</span>
              <div class="singer">
                <span class="singername" v-for="(v, i) of songlist[index].ar" :key="i" ref="singername">{{ v.name + '&nbsp;/&nbsp;' }}</span>
              </div>
            </div>
            <span class="icon"><van-icon name="ellipsis" size="22" color="#fff" /></span>
          </li>
          <!-- </router-link> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import eventBus from '../../eventBus.js'
export default {
  data() {
    return {
      songlist: [],
      singername: '',
      //所有歌曲id
      songAllID: [],
    }
  },
  mounted() {
    let cookie = window.localStorage.getItem('cookie')
    this.http.get(`/recommend/songs?cookie=${cookie}`, { withCredentials: true }).then((res) => {
      if (res.data.code !== 200) return this.$toast('获取数据失败！')
      this.songlist = res.data.data.dailySongs
      this.songlist.forEach((v) => {
        this.songAllID.push(v.id)
      })
      // this.$store.commit('setSongList', this.songlist)
      // window.sessionStorage.setItem('setSongListData', JSON.stringify(this.songlist))
    })
  },
  methods: {
    onClickRight() {
      this.$toast('按钮')
    },
    getSongID(id, songName, singerName, songPic, index) {
      eventBus.$emit('sendID', id, songName, singerName, songPic, index)
      // this.isPlay = true
      // this.audioObj.play()
      // for (var k of this.songlist[i].ar) {
      //   this.singername = k.name
      // }
      // setTimeout(() => {
      //   eventBus.$emit('sendIndex', i)
      // }, 10)
      // this.$router.push(`/songdetaill/${val.id}/${val.name}/${this.setUrl(val.al.picUrl)}/${this.singername}`)
    },
    getAllID(allID) {
      eventBus.$emit('sendAllID', allID)
    },
    setUrl(url) {
      if (url) {
        // 转码
        return encodeURIComponent(url)
      }
    },
  },
}
</script>
<style scoped>
.play {
  margin-right: 20px;
}
.songName {
  flex: 1;
  margin: 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dot {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(#3a2b2b, #1a1717);
}
.dot img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.singer {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ccc;
}
.icon {
  transform: rotate(90deg);
  z-index: -1;
}
.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.content {
  height: 100%;
  background-color: #1a171750;
}
.ul {
  width: 100%;
  padding: 0 10px 50px;
  box-sizing: border-box;
  color: var(--font-color);
}
.li {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
.li img {
  width: 44px;
  height: 44px;
  margin-right: 10px;
}
.msg {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.foot {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-around;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #4b4b4b;
  color: var(--font-color);
  padding: 0 20px;
  box-sizing: border-box;
}
.playall {
  font-size: 16px;
  padding: 10px 0;
}

.header {
  position: sticky;
  top: -180px;
  width: 100%;
  background-color: #4b4b4b;
  color: var(--font-color);
  transition: all 0.3s;
}
.header img {
  width: 100%;
}
.container .navbar {
  background-color: transparent;
}
</style>
